文章將陸續整理並更新至個人部落格。

咦，box-shadow 和 box model 唸起來很像? 他們的確有關聯沒錯!
還記得 box model 是由四個部分：內容區(content)、內距(padding)、邊框(border)與外距(margin)所組成，而每個部分都有屬於自己的外邊緣(edge)。

box-shadow 在無任何偏移且無設定 blur-radius 和 spread-distance 時，陰影並非不存在，而是完全與元素重疊，即使元素背景顏色是透明的仍看不見。若元素有邊框，則此時外陰影大小為邊框邊緣(border edge)所圍繞的範圍；內陰影大小為內距邊緣(padding edge)所圍繞的範圍。

box-shadow : x 軸 | y 軸| 模糊半徑 | 擴散距離 | 顏色 | (inset)

註： 內陰影 inset 可加在最前面或最後面。

例如，有個 div，它有 15px 的灰色邊框，現在讓它的紅色外陰影向右偏移 1px，會發現陰影「看起來」像是從 border edge 開始向外繪製。

<div class="box"></div>

.box {
    border: 15px dashed grey;
    box-shadow: 1px 0 0 0 red;
}

現在將外陰影改為內陰影(inset)，讓紅色內陰影向左偏移 1px，會發現陰影「看起來」像是從 padding edge 開始向內繪製。

.box {
    border: 15px dashed grey;
    box-shadow: inset -1px 0 0 0 red;
}

小試身手

現在來感受一下 box-shadow 的魅力吧！

外陰影在 x 軸與 y 軸皆無任何偏移，也無模糊，但讓陰影擴大 20px (即第四個值)。
⇒ 原本重疊在元素後面的陰影在上下左右各加了 20px。

橘色外陰影向下偏移 30px。
⇒ y = 30px

.box {
    box-shadow: 0 30px orange;
}

橘色外陰影向左偏移 50px、向上偏移 20px。
⇒ x = -50px、y = -20px

.box {
    box-shadow: -50px -20px orange;
}

橘色內陰影向左偏移 50px、向上偏移 20px。
⇒ x = -50px、y = -20px

.box {
    box-shadow: inset -50px -20px orange;
}

同時使用多個陰影，依序橘色、紅色、藍色。
⇒ 以逗號隔開，注意寫愈前面 shadow 的 z-index 值愈大。

box {
    box-shadow: 50px -20px orange, -50px 40px #B71B1C, -100px -100px #1A286A;
}

陰影整個飛出去！
⇒ 偏移超過元素的長度或高度

陰影會和 border 的形狀一模一樣！

陰影可以做動畫！範例連結

[最後補充]

橘色內陰影會在內容(content)下層，在背景(background)上層唷。(小狗為一張 background-image)範例連結

不知小試身手完有沒有激起你熊熊的靈感呢～
明天就來用 box-shadow 畫圖吧！
明天見囉～

參考資料

W3C-Miscellaneous Effects
W3C-Painting order
MDN-box-shadow